

$(function () {
    $('.firstNav>li:nth-of-type(5)').click(function () {
        $('.more-menu').slideToggle()
    });
    // 创建div用于点击导航时遮罩
    $('.sign').append("<div class='show-box'></div>");
    $('.show-box').css({ width: '100%', height: '100%', position: 'fixed', top: '120px', left: '0px', background: 'rgba(0,0,0,0.9)' }).hide();
    // 点击显示登录页面
    $(".sign-show").click(function () {
        if ($(".signIn").is(':hidden')) {
            $(".signIn").show();
            $('.show-box').show()
            $(this).css({ background: '#fff', color: '#000' })
        } else {
            $(".signIn").hide()
            $('.show-box').hide()
            $(this).css({ background: '#000', color: '#fff' })

        }
        $('.submit').click(function () {
            let username = $('[name="username"]').val();
            let password = $('[name="password"]').val();
            // console.log(username);
            var reg1 = /^1[3-9]\d{9}$/;
            // 密码：所有的数字字母下划线 12
            var reg2 = /^\w{6}$/;
            // 请求登录接口
            $.ajax({
                url: 'http://jx.xuzhixiang.top/ap/api/login.php',
                type: 'get',
                dataType: 'json',
                data: { username: username, password: password },
                success: function (data) {
                    console.log(username)
                    console.log(data)
                    if (data.code == 1) {
                        setCookie("id",data.data.id)
                        setCookie("token",data.data.token)
                        window.location.href='http://127.0.0.1:5500/page/index.html'
                        
                        // location.reload()
                    } else {
                        if (!reg1.test(username)) { alert('手机号输入有误，请重新输入') } else { alert('账号不存在，请前往注册') }
                    }
                }
            })

        })
    });

    // 点击li时跳转列表页
    $('.firstNav>li').not($(".firstNav>li:last")).click(function(){
        if(getCookie('id')){
            window.location.href='product-list.html'
        }else{
            alert('请登录您的账号')
        }
    });
    // 点叉号消失
    $(".removeSignin").click(function () {
        $(".signIn").hide();
        $('.show-box').hide();
        $('.sign-show').css({ background: '#000', color: '#fff' })
    });
    // 搜索的遮罩效果
    $('.search').append('<div class="show-search"></div>');
    $('.show-search').css({ width: '100%', height: '400px', position: 'absolute', top: '120px', left: '0px', background: 'rgba(0,0,0,0.9)' }).hide();
    $('.search').hover(function () {
        $('.show-search').show()
        $('.search-con').show()
    },function () {
            $('.show-search').hide()
            $('.search-con').hide()

    });
    $('.icon-fork-search').click(function () { $('.show-search').hide() });
    $('.icon-fork-search').click(function () { $('.search-con').hide() });

    // 问题：由于创建的元素在search里，所以移出search在创建的元素的遮罩层上，遮罩层不会消失,
    //    首页登录弹出框处理

    // 轮播图的js
    var swiper1 = new Swiper('.lunbo-con .swiper-container', {
      slidesPerView: 5,
      spaceBetween: 16,
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      autoplay:true,
    });

    // 调用列表商品街口
    
    // 调登录的接口获取数据渲染页面
    var id = getCookie('id');//从cookie中取id
    console.log(id)
    $.ajax({
            type: "get",
            url: "http://jx.xuzhixiang.top/ap/api/allproductlist.php",
            data: { uid: id },//查看接口中，从cookie取到id，请求后台id为34175的用户的数据
            dataType: "json",
            success: function (result) {
                // console.log(result)
                //后台拿到的数据是一个大的对象。里边有data，和mesg,data是数组里包对象，每一个对象是一个列表的数据
                var data = result.data;
                console.log(data)
                // console.log(data)此时的data是数组包的对象，遍历数组拿到对象渲染页面即可
                //   截取索引为5到20的数据渲染第一个唇膏的列表
                // slice截取索引参数一到参数二的数组中的元素(不包括参数二的元素)，并将这些元素组成新的数组返回
                var data1 = $(data).slice(6,14);//截取索引6到18的12个元素
                // console.log(data1)
                // console.log(data[1].pdesc)
                var str='';
    
                //jq的each遍历，i是索引
                $(data1).each(function (i) {
                    str += `<div class="list-connect">
                                <h4>${data1[i].pname}</h4>
                                <b>POWDER KISS LIPSTICK</b>
                                <p>${data1[i].pdesc}</p>
                                <a href='details.html?product_id=${data1[i].pid}'><img src=${data1[i].pimg}></a>
                                <div class="list-bottom">
                                    <span>${data1[i].pprice}</span>
                                <div class="btn">限时优惠</div>
                                </div>
                            </div>`
                })
                $('.showF').html(str)
                
                // 渲染子弹头的列表展示
                var data2 = $(data).slice(6,14);
                var str1 = '';
                $(data2).each(function(i){
                     str1 += `<div class="list-connect">
                                <h4>${data2[i].pname}</h4>
                                <b>POWDER KISS LIPSTICK</b>
                                <p>${data2[i].pdesc}</p>
                                <a href='details.html?product_id=${data2[i].pid}'><img src=${data2[i].pimg}></a>
                                <div class="list-bottom">
                                    <span>${data2[i].pprice}</span>
                                <div class="btn" data-id="${id}">经典款</div>
                                </div>
                            </div>`
                })
                $('.showS').html(str1)
                // 渲染子弹头的列表
                var data3 = $(data.slice(0,1))//取索引0的元素
                // console.log(data3)
                var str3='';
                for(let j = 0;j<4;j++){
                    $(data3).each(function(i){
                        str3 += `<div class="list-connect">
                                   <h4>${data3[i].pname}</h4>
                                   <b>LIPSTICK / MARBLE</b>
                                   <p>${data3[i].pdesc}</p>
                                   <a href='details.html?product_id=${data3[i].pid}'><img src=${data3[i].pimg}></a>
                                   <div class="list-bottom">
                                       <span>${data3[i].pprice}</span>
                                   <div class="btn" data-id="${id}">买一送一</div>
                                   </div>
                               </div>`
                   })
                   $('.showT').html(str3)
                }
            
                // 实现点击图片跳转到详情页
                // 注意这里的图片是ajax请求数据渲染的，是异步操作，所以要在success中获取
                // 在success外拿不到，因为ajax请求数据先挂起执行下边的
                // 代码，，所以拿不到图片，点击跳转事件也无法生效
                // // console.log($('.to-details'))
                // $('.to-details').click(function(){
                //     window.location.href='details.html'
                // })
                // 或者直接写在a标签上，用href将商品的id拼在跳转路径中，将来在详情页购物车页获取该商品id，渲染
            
            }
    
    });
    
    // 滑过出现随机色
    // 封装函数
    function randomColor() {
        var color = "";
        for (var i = 0; i < 6; i++) {
            color += (Math.random() * 16 | 0).toString(16);
        }
        return "#" + color;
    }
    $('.buy-two div span').hover(function(){
        $(this).css({'color':randomColor()})
        $(this).siblings().css({'color':randomColor()})
    })
       
    
       
    
    
    

})
